<template>
  <div class="private-message-settings">

    <div class="settings-group">
      <div class="settings-label">允许谁给我发私信</div>

      <el-radio-group v-model="messagePermission" class="radio-group horizontal">
        <el-radio label="all" class="radio-item">
          <span class="radio-text">所有人</span>
        </el-radio>

        <el-radio label="following" class="radio-item">
          <span class="radio-text">我关注的人</span>
        </el-radio>

        <el-radio label="mutual" class="radio-item">
          <span class="radio-text">互相关注的人</span>
        </el-radio>

        <el-radio label="none" class="radio-item">
          <span class="radio-text">关闭</span>
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const messagePermission = ref('all') // 默认选中"所有人"
</script>

<style scoped>
.private-message-settings {
  max-width: 100vw; /* 增加最大宽度以适应一行显示 */
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.settings-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.settings-group {
  margin-bottom: 20px;
}

.settings-label {
  font-size: 15px;
  color: #606266;
  margin-bottom: 16px;
  font-weight: 500;
}

.radio-group {
  display: flex;
  gap: 24px; /* 选项间距 */
}

.radio-group.horizontal {
  flex-direction: row; /* 水平排列 */
  flex-wrap: wrap; /* 如果空间不足可以换行 */
}

.radio-item {
  align-items: center;
  white-space: nowrap; /* 防止文字换行 */
}

.radio-item :deep(.el-radio__label) {
  color: #606266;
  font-size: 14px;
  padding-left: 6px; /* 调整文字与圆点的间距 */
}


</style>
